<template>
  <!-- 底部模板展示 -->
  <scroll-view class="menu-content" scroll-y="true" :show-scrollbar="false">
    <view class="content">
      <view
        class="menu-item"
        v-for="(item, index) in pageArray"
        :key="item.name"
        @click="activeFn(index)"
      >
        <view class="menu-img-box">
          <image :src="item.image" class="menu-img" mode="widthFix"></image>
        </view>

        <text class="menu-title">{{ item.name }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue";
import { myComponentsNames } from "@/components/globalComponents";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup(props, context) {
    const data = reactive({
      pageArray: [],
    });
    // 登录页面展示截图，生成登录组件截图数据
    myComponentsNames.login.forEach((name) => {
      data.pageArray.push({
        name,
        image: `/static/components/login/${name}.jpg`,
      });
    });
    const activeFn = (index) => {
      // 跳转页面
      uni.navigateTo({
        url: `/pages/linkPage/componentsPage/login?index=${index}`,
      });
      // 跳转pages页面
    };
    return {
      activeFn,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.menu-content {
  height: calc(100% - 80rpx);
  .content {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;
    .menu-item {
      width: calc(33.33% - 20rpx); /* 每项占三分之一减去一些间距 */
      box-sizing: border-box;
      margin: 10rpx;
      text-align: center;
      .menu-title {
        font-size: 20rpx;
        color: #666;
      }
      .menu-img-box {
        height: 453rpx;
        overflow: hidden;
        position: relative;
        border-radius: 10rpx;
        box-shadow: 0px 2px 10rpx 0rpx rgba(0, 0, 0, 0.2);
        .menu-img {
          position: absolute;
          top: -18rpx;
          left: 0;
          border-radius: 10rpx;
          width: 100%;
        }
      }
    }
  }
}
</style>
